<template>
  <div>
    <header>
      <div class="left">
        <h1>陈优秀， 您好呀</h1>
        <p>今天为你推荐4款商品哦~~</p>
      </div>
      <div class="right">
        <span @click="$router.push('/serach')">
          <van-icon name="search" />
        </span>
      </div>
    </header>
    <section id="banner">
        <div class="swiper-container1">
          <div class="swiper-wrapper">
              <div class="swiper-slide ">
                <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/114626/6/11113/99082/5efaec5eE1c9f58e7/751d4ade942d1d57.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt="" width="100%">
                <div class="bottom">
                  <h6>小婷儿</h6>
                  <p>小婷儿找妈妈</p>
                  <h6>已售6666件<span>￥26.66</span></h6>
                </div>
              </div>
              <div class="swiper-slide">
                <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/90083/37/11730/206664/5e3d43eaEd9fb7597/fa7967b958a65e7e.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt=""  width="100%">
                <div class="bottom">
                  1111
                </div>
              </div>
              <div class="swiper-slide">
                <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/123244/37/5822/203966/5ef86687E7f27ddd0/43a176665d7e5c6c.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt="" width="100%">
                <div class="bottom">
                  1111
                </div>
              </div>
              <div class="swiper-slide">
                <img src="//imgcps.jd.com/ling4/100012950510/56yU6K6w5pys57K-6YCJ5aSn54mM/5aW956S85LiN5pat/p-5c13869682acdd181deeff08/bc1223b7/cr_1125x445_0_171/s1125x690/q70.jpg" alt="" width="100%">
                <div class="bottom">
                  1111
                </div>
              </div>
              <div class="swiper-slide">
                <img src="//m.360buyimg.com/mobilecms/s700x280_jfs/t1/120606/37/3380/145153/5ed20ff8Efac61859/1bcd43ccb60fe953.jpg!cr_1125x445_0_171!q70.jpg.dpg" alt="" width="100%">
                <div class="bottom">
                  1111
                </div>
              </div>
          </div>
      </div>
    </section>
    <nav>
      <p>
        新品 top.10
        <span>查看更多 ></span>
      </p>
      <div class="swiper">
        <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="img">
              <img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/144938/4/1725/185502/5efaacdcEec2b0202/0d977c16b48a7e4c.jpg.dpg" alt="" width="100%">
              <h3>简易家具镜</h3>
              <h4>￥89.50</h4>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img">
            <img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/144938/4/1725/185502/5efaacdcEec2b0202/0d977c16b48a7e4c.jpg.dpg" alt="" width="100%">
            <h3>简易家具镜</h3>
            <h4>￥89.50</h4>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img">
            <img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/144938/4/1725/185502/5efaacdcEec2b0202/0d977c16b48a7e4c.jpg.dpg" alt="" width="100%">
            <h3>简易家具镜</h3>
            <h4>￥89.50</h4>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="img">
            <img src="https://wqimg.jd.com/imgproxy/n7/s150x150_jfs/t1/144938/4/1725/185502/5efaacdcEec2b0202/0d977c16b48a7e4c.jpg.dpg" alt="" width="100%">
            <h3>简易家具镜</h3>
            <h4>￥89.50</h4>
            </div>
          </div>
        </div>
      </div>
      </div>
    </nav>
    <main>
      <h1>热销</h1>
      <ul>
        <li>
          <img src="../../../public/cznimg/2.png" alt />
          <h3>简易家具镜</h3>
          <h4>￥89.50</h4>
        </li>
        <li>
          <img src="../../../public/cznimg/2.png" alt />
          <h3>简易家具镜</h3>
          <h4>￥89.50</h4>
        </li>
        <li>
          <img src="../../../public/cznimg/2.png" alt />
          <h3>简易家具镜</h3>
          <h4>￥89.50</h4>
        </li>
        <li>
          <img src="../../../public/cznimg/2.png" alt />
          <h3>简易家具镜</h3>
          <h4>￥89.50</h4>
        </li>
      </ul>
    </main>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
import  { banner }  from '../../api/index'
export default {
  data(){
    return {
      banenr:[]
    }
  },
  mounted(){
    new Swiper ('.swiper-container1', {
    loop: true, // 循环模式选项
    effect : 'cube',
    cubeEffect: {
      slideShadows: true,
      shadow: true,
      shadowOffset: 8,
      shadowScale: 1.3
    },
    // autoplay: {
    //   disableOnInteraction: false, //手动滑动之后不打断播放
    //   delay: 2500
    // },
    // pagination: {
    //   el: ".swiper-pagination"
    // }
    // effect : 'coverflow',
    // slidesPerView: 3,
    // centeredSlides: true,
    // coverflowEffect: {
    //   rotate: 30,
    //   stretch: 10,
    //   depth: 60,
    //   modifier: 2,
    //   slideShadows : true
    // }
    })
    new Swiper ('.swiper-container', {
      // effect : 'coverflow',
      slidesPerView: 3,
      // centeredSlides: true,
      coverflowEffect: {
      // rotate: 30,
      // stretch: 10,
      // depth: 60,
      // modifier: 2,
      // slideShadows : true
      },
    })
    banner().then(res=>{
      console.log(111,res);
      this.banner = res.data
      
    })
  }
}
</script>

<style lang="scss" scoped>
header{
  padding:.1rem .15rem 0 .1rem;
  display: flex;
  justify-content: space-between;
  .left{
    h1{
      font-size: 26px;
      font-weight: 550;
    }
    p{
      font: 15px/30px "";
      color: #999;
    }
  }
  .right{
    margin-top: .2rem;
    span{
      font-size:25px;
      font-weight: 800;
    }
  }
}
#banenr{
  .swiper-container1{
    .swiper-wrapper{
      .swiper-slide{
        img{
        width: 100%;
        border-radius: 10px;
        }
        .bottom{
          width: .5rem;
          height: .3rem;
          background: #666 ;
          
        }
      }
    }
  }
  
}
nav{
  padding-left: .1rem;
  p{
    padding: 0 .15rem 0 0 ;
    font:550 16px/3 "";
    span{
      float: right;
      font: 12px/48px "";
      color: #999;
    }
  }
  .swiper{
      // box-shadow: 0px 0px 8px rgba(0,0,0,.5);
      // box-shadow:inset 0px 15px 10px -15px #000;
      // box-shadow:0px -1px 5px 0px rgb(0, 0, 0);
      // border-radius: 10px;
      box-shadow:3px 0 10px -4px #000;
      .img{
        text-align: center;
        img{
        }
        h3{
          text-align: center;
        }
        h4{
          text-align: center;
        }
      }
      .swiper-slide{
        padding: 0 .1rem;
      }
    }
}
main {
  padding: 0 .1rem;
  h1 {
    font: 550 16px/4 "";
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    li {
      width: 50%;
      // display: flex;
      // justify-content: center;
      // align-items: center;
        margin:0 auto;
      text-align: center;
      img {
        width:90%;
        // vertical-align: middle
      }
      h3 {
        text-align: center;
        // font: 600 15px/24px "";
      }
      h4 {
        text-align: center;
        // font: 600 14px/40px "";
      }
    }
  }
}
</style>
